<template>
    <div>
    <el-dialog
        title="添加商品"
        :visible.sync="isDlgShow"
        width="65%"
        v-on:close="closeHandler()"
        center>
        <span>
            <el-row>
                <el-col :span="3">
                    <div>*商品名称:</div>
                </el-col>
                <el-col :span="21">
                    <el-input
                        placeholder="请输入内容"
                        v-model="inputtxt"
                        clearable>
                    </el-input>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*简介:</div>
                </el-col>
                <el-col :span="21">
                    <el-input
                        placeholder="请输入内容"
                        v-model="explain"
                        clearable>
                    </el-input>
                 </el-col>
            </el-row>
            <el-row>
                 <el-col :span="3">
                    <div>*是否下架:</div>
                 </el-col>
                  <el-col :span="21">
                    <el-switch
                        v-model="isValid"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text = "是"
                        inactive-text = "否"
                        >
                    </el-switch>
                 </el-col>
            </el-row>
                <el-row>
                <el-col :span="3">
                    <div>*缩略图：</div>
                </el-col>
                <el-col :span="21">
                   <el-upload list-type="picture-card" class="upload-demo" ref="upload" 
                    action="" 
                    :http-request="onThumbUpload" 
                    :file-list="thumbList"
                    :before-upload="beforeImageUpload" 
                    :auto-upload="true" 
                    :limit="thumbLimit"
                    :on-exceed="onUploadExceed"
                    :on-error="onUploadError"
                    :on-remove="onThumbUploadRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*价格：</div>
                </el-col>
                <el-col :span="21">
                    <el-input-number v-model="price" :precision="2" :step="1" :max="100000000"></el-input-number>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*排序：</div>
                </el-col>
                <el-col :span="21">
                    <el-input-number v-model="sort" :precision="2" :step="1" :max="100000000"></el-input-number>
                     排序值越大越靠前
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*库存：</div>
                </el-col>
                <el-col :span="21">
                    <el-input-number v-model="storage" :step="1" :max="10000000"></el-input-number>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*赛道等级：</div>
                </el-col>
                <el-col :span="21">
                   <el-rate
                    v-model="level"
                    :texts="['1级', '2级', '3级', '4级', '5级']"
                    show-text>
                    </el-rate>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*轮播图:</div>
                </el-col>
                <el-col :span="21">
                    <el-upload list-type="picture-card" class="upload-demo" ref="upload" 
                    action=""
                    :multiple="true" 
                    :http-request="onSlidesUpload" 
                    :file-list="slides"
                    :auto-upload="true"
                    :before-upload="beforeImageUpload" 
                    :limit="slidesLimit"
                    :on-exceed="onUploadExceed"
                    :on-error="onUploadError"
                    :on-remove="onSlidesUploadRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*省份/城市：</div>
                </el-col>
                <el-col :span="21">
                    <el-cascader
                        placeholder="请选择：可搜索"
                        :options="provinces"
                        filterable
                        change-on-select
                        @change="handleProvincesChange"
                        clearable>
                    </el-cascader>
                 </el-col>
            </el-row>
            <el-row>
            <el-col :span="3">
                <div>*所属目录:</div>
                </el-col>
                <el-col :span="21">
                    <el-col class="addBar">
                        <el-button type="primary"  @click="innerVisible = true">添加目录</el-button>
                        <el-dialog
                            width="30%"
                            title="添加目录"
                            :visible.sync="innerVisible"
                            append-to-body>
                            <span>
                             <el-cascader
                                placeholder="请选择：可搜索"
                                :options="options"
                                filterable
                                change-on-select
                                @change="handleCategoryChange"
                                clearable>
                            </el-cascader>
                            </span>
                            <span slot="footer" class="dialog-footer">
                            <el-button @click="innerVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addCategoryHandler()">确定</el-button>
                            </span>
                        </el-dialog>
                    </el-col>
                    <el-col v-for="zipdata in zipdatas" :key="zipdata.key" class="addBar">
                        <el-tag>{{zipdata.name}}</el-tag>
                        <el-button type="danger" size="mini" @click.prevent="removeCategory(zipdata)">删除</el-button>
                    </el-col>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="3">
                    <div>*详情:</div>
                </el-col>
                <el-col :span="21">
                    <my-quill-editor  v-model="details" :sign-url="$axios.defaults.baseURL+'/sign/head'">
                    </my-quill-editor>
                 </el-col>
            </el-row>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveProduct()">提交</el-button>
            <el-button @click="closeHandler()">取消</el-button>
        </span>
    </el-dialog>
    </div>
</template>
<script>
import myQuillEditor from "../my-quill-editor";
export default {
    created() {
        this.provinces = this.$province;
        let category = this.$persistence.get("category") ? this.$persistence.get("category") : null;
        if (category == null) {
            this.getCategoryList();
        } else {
            this.options = category;
            this.loading = false;
        }
    },
    name: "addcommodity",
    components: { myQuillEditor },
    data() {
        return {
            provinces: [],
            options: [],
            selValue: [],
            selProvinces: [],
            admin: this.$persistence.get("admin"),
            zipdatas: [],
            isDlgShow: true,
            isValid: true,
            innerVisible: false,
            inputtxt: "",
            jijie: "",
            storage: 1,
            explain: "",
            price: 1,
            details: "",
            province: "",
            city: "",
            level: 1,
            tags: [],
            sort: 1,
            slidesLimit: 9,
            thumbLimit: 1,
            thumbList: [],
            slides: []
        };
    },
    methods: {
        saveProduct() {
            var product = {
                name: this.inputtxt,
                price: this.price,
                storage: this.storage,
                thumb: this.getSlidesUrl(this.thumbList),
                slides: this.getSlidesUrl(this.slides),
                details: this.details,
                isValid: this.isValid,
                level: this.level,
                sort: this.sort,
                explain: this.explain,
                province: this.province,
                city: this.city,
                tags: this.tags,
                categorys: this.categorys
            };
            this.$axiosPost(
                "/AdminService/saveProduct",
                {
                    session: this.admin.session,
                    product: product
                },
                response => {
                    this.$message({
                        message: "添加商品成功！",
                        type: "warning"
                    });
                    this.loading = false;
                    this.isDlgShow = false;
                    this.$emit("save-product-hdl");
                    this.$emit("close-hdl");
                },
                error => {
                    this.loading = false;
                }
            );
        },
        getSlidesUrl(fileList) {
            if (fileList.length == 1) {
                return fileList[0].url;
            } else {
                let list = [];
                for (const key in fileList) {
                    if (fileList.hasOwnProperty(key)) {
                        const file = fileList[key];
                        list.push(file.url);
                    }
                }
                return list;
            }
        },
        getCategoryList() {
            this.$axiosPost(
                "/AdminService/findCategory",
                {
                    session: this.admin.session,
                    opts: { where: {} }
                },
                response => {
                    var categoryData = this.$findCategory(response.data.list, this.options);
                    this.$persistence.put("category", categoryData);
                    this.options = categoryData;
                    this.loading = false;
                },
                error => {
                    this.loading = false;
                }
            );
        },
        handleProvincesChange(value) {
            this.selProvinces = value;
            if (this.selProvinces && this.selProvinces.constructor == Array) {
                for (let index = 0; index < this.selProvinces.length; index++) {
                    if (index == 0) {
                        this.province = this.$getCategoryNameHander(this.provinces, this.selProvinces[index]);
                        this.city = "";
                    } else {
                        this.city = this.$getCategoryNameHander(this.provinces, this.selProvinces[index]);
                    }
                }
            }
        },
        handleCategoryChange(value) {
            this.selValue = value;
        },
        removeCategory(item) {
            var index = this.zipdatas.indexOf(item);
            if (index !== -1) {
                this.zipdatas.splice(index, 1);
            }
        },
        onUploadExceed(file, fileList) {
            this.$message.error("上传图片超过" + fileList.length + "张");
        },
        addCategoryHandler() {
            if (this.selValue && this.selValue.constructor == Array) {
                let zipstr = "";
                let zipid = 0;
                for (let index = 0; index < this.selValue.length; index++) {
                    const element = this.selValue[index];
                    zipstr += "/" + this.$getCategoryNameHander(this.options, element);
                    zipid = element;
                }
                this.zipdatas.push({ name: zipstr, id: zipid });
            }
            this.selValue = null;
            this.innerVisible = false;
        },
        closeHandler() {
            this.isDlgShow = false;
            this.$emit("close-hdl");
        },
        beforeImageUpload(file) {
            return this.$checkUpload(file);
        },
        onSlidesUpload(data) {
            this.$starUplodeFile(data, this.slides);
        },
        onThumbUpload(data) {
            this.$starUplodeFile(data, this.thumbList);
        },
        onUploadError(err, file, fileList) {
            this.$message.error("上传图片失败!" + err);
        },
        onThumbUploadRemove(file, fileList) {
            this.thumbList = fileList;
        },
        onSlidesUploadRemove(file, fileList) {
            this.slides = fileList;
        }
    }
};
</script>

<style scoped>
.addBar {
    margin-bottom: 5px;
}
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.bg-purple {
    background: #d3dce6;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>